<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" width="600px" append-to-body>
    <el-form ref="form" :model="model" :rules="rules" label-width="110px" label-suffix=":">
          <el-form-item label="原因" prop="cancel_reason">
              <el-select v-model="model.cancel_reason" placeholder="">
                <el-option label="断货" value="断货"></el-option>
                <el-option label="换货" value="换货"></el-option>
                <el-option label="退货" value="退货"></el-option>
                <el-option label="无效" value="无效"></el-option>
                <el-option label="其他" value="其他"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="cancel_remark">
              <el-input v-model.trim="model.cancel_remark" type="textarea" :rows="6" placeholder="请填写您要备注的内容（最多200字符）" :maxlength="200" show-word-limit clearable style="width: 100%"></el-input>
          </el-form-item>
          <div><el-tag type="primary" style="margin-right: 8px">说明</el-tag>取消会关闭采购单，同时移入到已取消！</div>
      </el-form>
      
      <div slot="footer" class="dialo2-footer">
        <el-checkbox v-model="model.cancel_1688" :true-label="1"	:false-label="0" style="margin-right: 16px">同时取消1688订单</el-checkbox>
       <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { end_purchase } from '@/api/purchase'
export default {
  name: 'CancelDialog',
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default() {
        return {}
      }
    },
    type: {
      type: String,
      default: 'cancel'
    }
  },
  data() {
      return {
        model: {
          cancel_reason: '断货',
          cancel_remark:'',
          cancel_1688: 0,
        },
        rules: {
          
        },
          save: false,
          loading: false
      }
  },
  computed: {
      title() {
          return `${this.type=='cancel' ? '取消采购' : '终止剩余到货'}-${this.params.purchase_number}`
      },
      dialogVisible: {
          get() {
              return this.value
          },
          set(val) {
              this.$emit('input', val)
          },
      },
  },
  watch: { },
   mounted() { 
    
   },
  methods: {

      submit() {
         if(this.model.cancel_remark.length == 0) {
          return this.$message.error('请填写备注')
         }
         this.save = true
          const params = {...this.model, purchase_number: this.params.purchase_number}
         end_purchase(params).then(()=>{
            this.$message.success('操作成功')
            this.$emit('success',true)
            this.cancel()
          }).finally(()=>{
            this.save = false
          })
              
      },
      cancel() {
          this.dialogVisible = false
      },
  },
}
</script>

<style>
.color-list {
  display: flex;
  align-items: center;
  height: 36px;
}
.color-item {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
  border: 2px solid #fff;
}
</style>
